<template>
  <section class="regular">
    <div class="regular-left regular-item">
      <div class="item item-top">
        <h4 class="item-title">活动总览</h4>
        <ul class="list">
          <li class="list-item" v-for="(item, key) in typeCount" :key="key">
            <i :class="['iconfont',item.icon, 'hotelcolor']"></i>
            <div class="text">
              <p>{{item.num}}</p>
              <span>{{item.label}}</span>
            </div>
          </li>
        </ul>
      </div>
      <div class="item item-bottom">
        <h4 class="item-title">人员活动频次分析</h4>
        <el-scrollbar style="height: calc(100% - 40px);overflow: hidden">
          <ul class="list">
            <li class="list-item" v-for="(item, key) in frequencyData" :key="key">
              <i :class="['iconfont', item.icon]"></i>
              <span>{{key}}</span>
              <div class="item-list">
                <div class="item-header" @click="changeList(key)">
                  共{{item.total}}条记录<i :class="['el-icon-arrow-down', item.off ? 'active' : '']"></i>
                </div>
                <ul :class="['item-content', item.off ? 'active' : '']">
                  <li v-for="(list, index) in item.list" :key="index">
                    <i :class="['iconfont', list.icon]"></i>
                    <span class="text">{{list.label}}</span>
                    <span class="fr"><i>{{list.num}}</i>次</span>
                  </li>
                </ul>
              </div>
            </li>
          </ul>
        </el-scrollbar>
      </div>
    </div>
    <div class="regular-right regular-item">
      <div class="item item-top">
        <h4 class="item-title">人员活动时序分析</h4>
        <div class="echart-wrapper">
          <echart-track chartId="trackEchart" :options="echartData"></echart-track>
        </div>
      </div>
      <div class="item item-bottom">
        <h4 class="item-title">
          <span>人员活动空间分析</span>
          <span class="fr">活动<i class="red">{{activitySpaceData.total}}</i>次</span>
        </h4>
        <ul class="active-list">
          <li class="active-li" v-for="(item, key) in activitySpaceData.list" :key="key">
            <p class="title">
              <i :class="['iconfont', item.icon]"></i>
              <span class="text">{{item.label}}</span>
              <span class="num">共<i class="red">{{item.total}}</i>次</span>
            </p>
            <el-scrollbar style="height: calc(100% - 30px)">
              <ul class="list">
                <li class="list-li" v-for="(list, key) in item.list" :key="key">
                  <span class="text">{{list.label}}</span>
                  <span class="num"><i class="blue">{{list.num}}</i>次</span>
                </li>
              </ul>
            </el-scrollbar>
          </li>
        </ul>
      </div>
    </div>
  </section>
</template>

<script>
import { mockdata } from '@/mock/mockdata.js'
import echartTrack from './echart-track.vue'

export default {
  components: {
    echartTrack
  },
  props: {
    regularData: {
      type: Object
    },
    typeList: {
      type: Object
    }
  },
  data () {
    return {
      typeCount:[],
      frequencyData: mockdata.frequencyData,
      hours: Array.apply(null, {length: 24}).map(Function.call, Number),
      dm: {},
      echartImg: {
        qc: require('../assets/img/bus.png'),
        wb: require('../assets/img/wangba.png'),
        bg: require('../assets/img/hotel.png'),
        jc: require('../assets/img/plane.png'),
        hcz: require('../assets/img/train.png')
      },
      echartData: mockdata.echartData,
      activityIcon: {
        qc: 'icon-qiche',
        wb: 'icon-lansewangba',
        bg: 'icon-lansebinguan',
        jc: 'icon-lansefeiji',
        hcz: 'icon-lansehuoche'
      },
      activitySpaceData: mockdata.activitySpaceData
    }
  },
  mounted(){
    this.getTypeCount();
    this.getActivitySpaceData();
    this.getFrequencyData();
    this.getEchartData();
  },
  watch: {
    regularData() {
      this.getTypeCount();
      this.getActivitySpaceData();
      this.getFrequencyData();
      this.getEchartData();
    }
  },
  methods: {
    changeList(key) {
      let _data = this.frequencyData[key];
      this.$set(_data, 'off', !_data['off']);
    },
    // 活动总览
    getTypeCount() {
      this.typeCount = [];
      this.activitySpaceData.total = 0;
      let _typeCout = this.regularData.typeCout;
      if(!_typeCout) {
        return false;
      }
      for(let k in _typeCout) {
        // typeList(父组件参数) 添加num 会改变父组件的数据  因为内存指向地址一样  
        let _item = Object.assign(this.typeList[k], { num: _typeCout[k] });
        this.typeCount.push(_item);
        this.activitySpaceData.total += _typeCout[k];
      }
    },
    // 人员活动频次分析
    getFrequencyData() {
      let _list = this.regularData.list;
      for(let k in this.frequencyData) {
        this.frequencyData[k].total = 0;
        this.frequencyData[k].off = false;
        this.frequencyData[k].list.splice(0);
      }
      if(!_list) {
        return false;
      }
      let _time,
          hour;
      _list.forEach(elem => {
        _time = elem['time'].replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/, '$1-$2-$3 $4:$5:$6');
        hour = new Date(_time).getHours();
        switch(true) {
          case hour>=0 && hour<5: 
            this.getReqData(this.frequencyData['0-5h'], elem);
            break;
          case hour>=5 && hour<8: 
            this.getReqData(this.frequencyData['5-8h'], elem);
            break; 
          case hour>=8 && hour<13: 
            this.getReqData(this.frequencyData['8-13h'], elem);
            break; 
          case hour>=13 && hour<17: 
            this.getReqData(this.frequencyData['13-17h'], elem);
            break; 
          case hour>=17 && hour<19: 
            this.getReqData(this.frequencyData['17-19h'], elem);
            break;
          case hour>=19 && hour<22: 
            this.getReqData(this.frequencyData['19-22h'], elem);
            break; 
          case hour>=22 && hour<24: 
            this.getReqData(this.frequencyData['22-24h'], elem);
            break;   
        }
        // console.log(this.frequencyData)
      });
    },
    getReqData(data, elem) {
      data.total += 1; 
      let _list = data.list,
          _item;
      let _data = Object.assign({}, data);    
      if(_list.length > 0) {
        for(let i = 0; i<_list.length; i++) {
          if(_list[i]['icon'] == this.typeList[elem['type']].icon && _list[i]['label'] == elem['label']){
            _item  = {
              icon: this.typeList[elem['type']].icon,
              label: elem.label,
              num: _list[i]['num']+1
            }
            _data.list.splice(i, 1, _item);
            return false;
          }
        }
      }    
      _item  = {
        icon: this.typeList[elem['type']].icon,
        label: elem.label,
        num: 1
      }
      _data.list.push(_item);
    },
    // 人员活动时序分析
    getEchartData() {
      this.echartData.xData.splice(0);
      this.echartData.sData.splice(0);
      let _list = this.regularData.list;
      if(!_list) {
        return false;
      }
      let _time,
          hour , date;
      _list.forEach(elem => {
        _time = elem['time'].replace(/(\d{4})(\d{2})(\d{2})(\d{2})(\d{2})(\d{2})/, '$1-$2-$3 $4:$5:$6');
        hour = new Date(_time).getHours();
        date = new Date(_time).Format('yyyy/MM/dd');
        if(this.echartData.xData.indexOf(date) == -1) {
          this.echartData.xData.push(date);
        }
        this.echartData.sData.push({value:[date, hour, _time+ '<br />'+elem['label'] ],symbol:'image://'+this.echartImg[elem['type']] });
        // console.log(this.echartData)
      });  
    },
    // 人员活动空间分析
    getActivitySpaceData() {
      let _labelCount = this.regularData.labelCount;
      if(!_labelCount) {
        return false;
      }
      let _list = {};
      for(let k in _labelCount) {
        let _item = {
          icon: this.activityIcon[k],
          label: this.typeList[k].label,
          total: this.regularData.typeCout[k],
          list: []
        }
        for(let i in _labelCount[k]) {
          _item.list.push({ label: i, num: _labelCount[k][i] });
        }
        _list[k] = _item;
      }
      this.$set(this.activitySpaceData, 'list', _list);
    }
  }
}
</script>

<style lang="stylus" scoped>
.hotelcolor{
  background-color #fe6370
}
.wbcolor{
  background-color #64c070
}
.planecolor{
  background-color #709ddf
}
.triancolor{
  background-color #eaa412
}
.buscolor{
  background-color #37b2f2
}
.regular{
  font-size 0
  .regular-item{
    display inline-block
    width 49.5%
    height 100%
    vertical-align middle
  }
  .item{
    background-color #fff
  }
  .item-title{
    position relative
    height 40px
    line-height 39px
    font-size 14px
    border-bottom 1px solid #d1d1d1
    padding-left 15px
    &:before{
      position absolute
      top 50%
      left 0
      display block
      content ''
      width 4px 
      height 14px
      transform translateY(-50%)
      background-color #1977cc
    }
  }
}
.regular-left{
  margin-right 1%
  .item-top{
    height 160px
    margin-bottom 10px
    .list{
      position relative
      margin-top 20px
      font-size 0
      padding 0 8px
    }
    .list-item{
      display inline-block
      width calc(25% - 16px)
      height 80px
      line-height 78px
      margin 0 8px
      border 1px solid #d1d1d1
      vertical-align middle
      text-align center
    }
    .iconfont{
      display inline-block
      width 44px
      height 44px
      line-height 44px
      color #fff
      font-size 24px
      border-radius 50%
      margin-right 15px
      vertical-align middle
      overflow hidden
    }
    .text{
      display inline-block
      line-height 1
      vertical-align middle
    }
    p{
      color #333
      font-size 18px
      font-weight bold
      margin-bottom 8px
    }
    span{
      color #787878
      font-size 14px
    }
  }
  .item-bottom{
    position relative
    height calc(100% - 170px)
    .list{
      // max-height calc(100% - 40px)
      margin-left 6%
      margin-top 24px
      padding-bottom 20px
      overflow hidden
      // overflow-y auto
    }
    .list-item{
      position relative
      line-height 30px
      margin-bottom 30px
      &:before{
        position absolute
        top 30px
        left 8px
        display block
        content ''
        width 1px 
        height 100%
        background-color #d1d1d1
      }
      &:last-of-type:before{
        display none
      }
      .iconfont{
        font-size 18px
        vertical-align top
      }
      .icon-qiche{
        font-size 16px
      }
      .colorw{
        color #003880
      }
      .colorb{
        color #d58f08
      }
      span{
        display inline-block
        width 70px
        padding-left 10px
        vertical-align top
      }
      .item-list{
        display inline-block
        width 68%
        // height 30px
        color #333
        font-size 14px
        border 1px solid #d1d1d1
        vertical-align top
        li{
          padding 7px 0 7px 2%
          .iconfont{
            display inline-block
            width 30px
            height 30px
            color #fff
            border-radius 50%
            overflow hidden
            text-align center
          }
          .text{
            display inline-block
            width 75%
            word-break normal
            white-space nowrap
            overflow hidden
            text-overflow ellipsis
            padding-left 2%
          }
          .fr{
            width 14%
            text-align center
            padding-left 2%
            i{
              color #1977cc
            }
          }
        }
      }
      .item-header{
        line-height 28px
        padding 0 10px
        background-color #f0f0f0
        cursor pointer
        i{
          float right
          margin-top 7px
          transform rotate(0)
          transition .4s all
          &.active{
            transform rotate(180deg)
          }    
        }
      }
      .item-content{
        height 0
        overflow hidden
        &.active{
          height auto 
        }
      }
    }
  }
}
.regular-right{
  .item-top{
    height 49.5%
  }
  .echart-wrapper{
    height calc(100% - 40px)
  }
  .item-bottom{
    position relative
    top 1%
    height 49.5%
    .red{
      color #cb1919
    }
    .blue{
      color #1977cc
    }
    .fr{
      float right
      margin-right 15px
    }
  }
  .active-list{
    height calc(100% - 40px)
    text-align center
    .active-li{
      display inline-block
      width 46%
      height 40%
      border 1px solid #d1d1d1
      margin 3% 1.5% 0
      vertical-align middle
      text-align left 
    }
    .title{
      height 30px
      line-height 30px
      padding 0 10px
      background-color #f0f0f0
      .iconfont{
        color #1977cc
        font-size 18px
      }
      .text{
        margin-left 10px
      }
      .num{
        float right
      }
    }
    .list{
      // height calc(100% - 30px)
      padding 10px
      .list-li{
        height 30px
        line-height 30px
      }
      .text{
        display inline-block
        width 85%
        word-break normal
        white-space nowrap
        overflow hidden
        text-overflow ellipsis
      }
      .num{
        float right
      }
    }
  }
}
</style>